<template>
	<view class="base-empty-box" >
		<view>
			<i class="iconfont  base-empty-icon" :class="[icon]" :style="{'--icon-color':iconColor,'--icon-size':iconSize}"></i>
		</view>
		<view class="base-empty-text" :style="{'--text-color':textColor,'--text-size':textSize}">
			{{text}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"base-empty",
		props: {
      // 文字提示
			text:{
				type:String,
				default:'已下架'
			},
      // 文字颜色
			textColor:{
				type:String,
				default:'rgb(192, 196, 204)'
			},
      // 文字大小
			textSize:{
				type:String,
				default:'32rpx'
			},
      // 图标名称（结合iconfont）
			icon:{
				type:String,
				default:'icon-lishijilu'
			},
      // 图标的颜色
			iconColor:{
				type:String,
				default:'rgb(192, 196, 204)'
			},
      // 图标的大小
			iconSize:{
				type:String,
				default:'88rpx'
			},

		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
.base-empty-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30vh;
	.base-empty-icon{
		color: var(--icon-color);
		font-size: var(--icon-size);
	}
	.base-empty-text{
		margin-top: 30rpx;
		color: var(--text-color);
		font-size: var(--text-size);
	}
}
</style>
